<template>
  <div id="centerbottom"> </div>
</template>

<script>
import * as echarts from 'echarts';
import data from '@/assets/json/yearandnumbers.json';
export default{
  data(){
    return {
      arr:data
    }
  },
  methods:{
    graph(){//初始化2
      var chart=echarts.init(document.getElementById("centerbottom"))
      var option={
              title: {
    // 设置标题文本
    text: '诗词数量统计图',
    // 设置标题的颜色为浅粉色
    textStyle: {
      // color: '#FFC0CB', // 这是标准的浅粉色值
       color: '#005C80',
      fontSize:20
    },
    left:15,
    top:'0',
  },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      ShadowBlur:10,
       shadowColor: 'rgba(200, 255, 255, 0.8)' 

    }
  },
  toolbox:{
     feature:{
                    saveAsImage:{},//保存该图表
                    dataView:{},//数据视图，看到原始数据并可以修改
                    restore:{},//重置功能
                    dataZoom:{},//区域缩放
                    magicType:{//不同类型的切换
                        type:['bar','line']
                    },
                    bottom:'50%',
                    myRefresh: {//自动生成图，随时间
                          interval: 5000000,
                            show: true,
                            title: '动态生成',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: function () {
                                chart.clear()
                                chart.setOption(option, true)
                            }
                        },
                        
                       
                }
  },
  
  xAxis: {
    type: 'category',
    data:this.xAxisData,
    interval: 1
    
  },
  yAxis: {
    type:'value',
   
  },
  series: [
    {
      name: '诗词数量',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 2,
      step:true,
       color: '#ADD8E6', // 这是标准的浅蓝色值
      areaStyle: {
            // 阴影颜色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color:  'rgba(200, 255, 255, 0.5)' // 起始颜色
            }, {
                offset: 1,
                color: 'rgba(200, 255, 255, 0.1)' // 结束颜色
            }]),
            // 阴影模糊大小
            shadowBlur: 10,
            // 阴影X偏移
            shadowOffsetX: 0,
            // 阴影Y偏移
            shadowOffsetY: 5,
            shadowColor: 'rgba(200, 255, 255, 0.3)' // 阴影颜色
        },
      data: this.yAxisData,
      markPoint:{
        data:[
          {
            type:'max' //最大值
          },
          {
            type:'min'  
          }
        ]
      }
    },
   
  ]
      };
      //chart.setOption(option)
      
    },
    responsiveChart() {
      const chart = echarts.init(document.getElementById("centerbottom"));
      chart.setOption(this.option);
      window.addEventListener('resize', () => {
        chart.resize();
      });
    }
    
  },
  
  computed:{
    xAxisData(){
     let xAxisData = new Array(35)
            for (let i = 0; i < this.arr.length; i++) {
                xAxisData[i] = this.arr[i].year
            }
            return xAxisData
    },
     yAxisData() {
            let yAxisData = new Array(35)
            for (let i = 0; i < this.arr.length; i++) {
                yAxisData[i] = this.arr[i].value
            }
            return yAxisData
        }
  },
  mounted(){
    this.graph()
    this.responsiveChart();
  }
}

</script>

<style>
#centerbottom {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
}
</style>
